import { useParams } from "react-router";
import { useOneType } from "../../hook/oneType";
import { useEffect } from "react";
import { Table, Card, Space, Button, Modal, Form, Input, message } from 'antd';
import React, { useState } from 'react';
import LabelsApi from "../../api/labels";

// 删除方法初始化
let delLabels = () => console.log("defalut");
const formItemLayout = {
    labelCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 8,
        },
    },
    wrapperCol: {
        xs: {
            span: 24,
        },
        sm: {
            span: 16,
        },
    },
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 8,
        },
    },
};
const columns = [
    {
        title: '子类型',
        dataIndex: 'title',
        key: 'title',
    },
    {
        title: '操作',
        key: 'action',
        render: record => (
            <Space size="middle">
                <Button value={record._id} onClick={(e) => delLabels(e)}>删除</Button>
            </Space>
        ),
    },
];

//eslint-disable-next-line
export default () => {
    // 获取路径上携带的参数
    const { _id } = useParams();
    const [{ title, labels }, { findType }] = useOneType()
    console.log(labels);

    // 删除类型信息
    delLabels = async (e) => {
        if (e.target.type === "button") {
            const labelId = e.target.value;
            console.log(labelId);
            await LabelsApi.del({ _id, labelId });
            findType(_id);
        }
    }

    // 数据请求
    useEffect(() => {
        findType(_id);
    }, [findType, _id]);
    console.log({ title, labels });
    // 指向输入框
    const [form] = Form.useForm();
    // 确认新增触发函数
    const onFinish = async (values) => {
        const { title } = values;
        console.log(title, _id);
        const data = await LabelsApi.add({ title, _id })
        console.log(data);
        if (data) {
            message.success("添加成功");
            form.resetFields()
        } else {
            message.error('添加失败！');
        }
        setIsModalVisible(false);
        findType(_id);
    };

    const [isModalVisible, setIsModalVisible] = useState(false);

    // 显示对话框
    const showModal = () => {
        setIsModalVisible(true);
    };

    // 点击确认触发函数
    // const handleOk = () => {
    //     setIsModalVisible(false);
    // };

    // 点击取消触发函数
    const handleCancel = () => {
        setIsModalVisible(false);
    };

    return (
        <Card title={title} bordered={true}>
            <Table columns={columns} dataSource={labels} pagination={false} rowKey={record => record._id} />
            <Space size="middle">
                <Button onClick={showModal}>新增标签</Button>
                <Modal title="Basic Modal" visible={isModalVisible}
                    footer={null}>
                    {/* 嵌套输入框 */}
                    <Form
                        {...formItemLayout}
                        form={form}
                        name="addTypes"
                        initialValues={{
                            prefix: '86',
                        }}
                        onFinish={onFinish}
                        scrollToFirstError
                        style={{ width: "400px" }}
                    >
                        <Form.Item
                            name="title"
                            label="title"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入类型名称！',
                                },
                            ]}
                        >
                            <Input placeholder="请输入类型名称" />
                        </Form.Item>

                        <Form.Item {...tailFormItemLayout}>
                            <div style={{ display: "flex", justifyContent: "space-evenly", marginLeft: "-30px" }}>
                                <Button type="primary" htmlType="submit">
                                    添加类型
                                </Button>
                                <Button key="back" onClick={handleCancel}>
                                    取消
                                </Button>
                            </div>
                        </Form.Item>
                    </Form>
                </Modal>
            </Space>
        </Card >
    )
}